<template>
	<div>
		<div class="sorts" v-if="sortsList.length!==0">
      <h2 class="h2-bb">{{title}}</h2>
			<span class="sort" v-for="(item, index) in sortsList" :class="{'sort-active': index === sortActived}" @click="sortClick(item, index)">
				{{item.title}}
			</span>
		</div>
    <div v-if="articleList.length !== 0">
      <list-item :articleList="articleList" type=""></list-item>
    </div>
    <div class="nodata" v-if="articleList.length === 0">
      <no-data :msg="msg"></no-data>
    </div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import listItem from 'base/articleList/list.vue'
import noData from 'base/NoData'
export default {
  data() {
    return {
      title: '分类',
      sortsList: [],
      articleList: [],
      sortActived: ''
    }
  },
  computed: {
    msg() {
      return this.sortsList.length === 0 ? '暂无分类' : (this.articleList.length === 0 && this.sortActived === '') ? '请选择一个分类' : '此分类下暂时没有文章'
    },
    ...mapGetters([
      'sortList'
    ])
  },
  components: {
    noData,
    listItem
  },
  created() {
    // setTimeout(() => {
    if (this.sortList.length === 0) {
      this.$store.dispatch('GetSortList', { pageindex: 1, pagesize: 100 }).then((res) => {
        this.sortsList = res.list
        this.sortTotal = res.total
      })
    } else {
      this.sortsList = this.sortList
    }
    // }, 0)
  },
  methods: {
    getArticleList() {
      this.$store.dispatch('GetArticleList', { all: 'all' })
    },
    sortClick(item, index) {
      this.sortActived = index
      this.$store.dispatch('GetThisSortList', item._id).then((res) => {
        this.articleList = res
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .sorts {
    padding: 5px 10px 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    line-height: 38px;
    width: 100%;
    background-color: rgba(255,255,255,0.5);
    .h2-bb {
      border-bottom: 1px #666 dashed;
      padding-bottom: 10px;
      user-select: none;
    }
    .sort {
      padding: 5px 10px;
      margin: 0px 5px;
      border-radius: 5px;
      cursor: pointer;
      background-color: rgba(255,255,255,0.5);
      user-select: none;
      &:hover {
        box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 6px;
      }
    }
    .sort-active {
      color: #fff;
      background-color: #1482f0;
    }
  }
</style>
